<template>
  <el-dialog :visible.sync="dialogVisible" width="600px"  :close-on-click-modal="false" :close-on-press-escape	='false'
             title="选择要绑定的主页" center>
    <ul class="dialogSign">
      <li v-for="item,index in list" :key="item.id" @click="chooseHome(item,index)" class="more">
        {{item.name}}
        <i class="el-icon-check" :style="{color:index==isHome?'#00aa00':'transparent'}"></i></li>
    </ul>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {getAccount} from '@/api/automation/socialAccount/bindFaceBook'

    export default {
        name: "dialogVisible",
        data() {
            return {
                dialogVisible: false,
                list: [],
                isHome: 0,
                row: '',
                type:1
            }
        },
        methods: {
            submit() {
                this.$emit('bindAccount', this.row,this.type)
                this.dialogVisible = false;
            },
            chooseHome(item, index) {
                this.isHome = index;
                this.row = item;
            },
            //获取主页
            getData(email,type){
                this.type=type;
                getAccount(email).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        if (result.length > 0) {
                            this.dialogVisible = true;
                            this.list = result;
                            this.row = this.list[0];
                        }else{
                            if(type==1){
                                this.$message({
                                    message: '您还没有创建主页，请先去facebook主页创建主页哦！',
                                    type: "success"
                                });
                            }else{
                                this.$emit('dealEnd',res)
                                this.dialogVisible = false;
                            }
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .dialogSign {
    max-height: 400px;
    overflow-y: scroll;

    li {
      height: 40px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;

      i {
        color: transparent;
        font-size: 27px;
      }

      .active {
        color: #00aa00;
      }
    }
  }
</style>
